<script setup>
import PersonInfo from "../components/PersonalInformation.vue";
import Card from "../components/Card.vue";
import PersonResume from "../components/PersonResume.vue";
import { useRect } from "@vant/use";
import { onMounted, watch, ref, reactive, nextTick } from "vue";
import {
  useUserInfoByUid,
  useUserResume,
  getUserInfoByToken,
} from "../api/user";

//控制下拉菜单
const rect = ref(null);
const image = ref(null);
const resumeEl = ref(null);
let resumeHeight;
const resumeStyle = reactive({
  transition: "all 0.5s",
  overflow: "hidden",
});
const height = ref(0);
const isDrop = ref(false);

//个人信息
const info = ref({});

const getRect = () => {
  console.dir(image.value);
  image.value.onload = () => {
    height.value = useRect(rect.value).height;
  };
};

onMounted(async () => {
  getRect();
  resumeStyle.height = 0;
  await getInfo();
  resumeStyle.height = "auto";
  nextTick(() => {
    resumeHeight = resumeEl.value.scrollHeight;
    resumeStyle.height = 0;
  });
});

//获取个人信息
const getInfo = async () => {
  const a = await getUserInfoByToken();
  const b = await useUserResume(a.data.uid);
  info.value = { ...a.data, ...b.data };
};
const changeResume = () => {
  isDrop.value = !isDrop.value;
  resumeStyle.height = isDrop.value ? resumeHeight + "px" : 0 + "px";
};
</script>

<template>
  <div class="container">
    <div
      class="back"
      :style="{
        paddingBottom: height / 2 + 20 + 'px',
        marginBottom: height / 2 + 20 + 'px',
      }"
    >
      <div class="person-info">
        <Card class="Back_heng">
          <PersonInfo :data="info"></PersonInfo>
          <div style="width: 100%" ref="resumeEl">
            <PersonResume :data="info" :style="resumeStyle"></PersonResume>
          </div>
          <van-button
            round
            size="mini"
            @click="changeResume"
            color="var(--main-gradient)"
            >{{ isDrop ? "收起" : "展开个人主页" }}</van-button
          >
        </Card>
      </div>
      <div class="cygn" ref="rect" :style="{ bottom: -height / 2 + 'px' }">
        <Card class="Back_shu">
          <div class="cygn-item">
            <img class="icon" src="../assets/attend.svg" ref="image" />
            <div class="icon-font van-ellipsis">我的项目</div>
          </div>
          <div class="cygn-item">
            <img class="icon" src="../assets/fav.svg" />
            <div class="icon-font van-ellipsis">收藏与浏览</div>
          </div>
          <div class="cygn-item">
            <img class="icon" src="../assets/carrer.svg" />
            <div class="icon-font van-ellipsis">简历</div>
          </div>
          <div class="cygn-item">
            <img class="icon" src="../assets/message.svg" />
            <div class="icon-font van-ellipsis">消息</div>
          </div>
        </Card>
      </div>
    </div>
    <van-cell-group inset>
      <van-cell
        title="个人信息"
        icon="orders-o"
        is-link
        :to="'/user/infoupdate'"
      />
      <van-cell title="账号设置" icon="setting-o" is-link />
      <van-cell title="关于我们" icon="phone-o" is-link />
    </van-cell-group>
  </div>
</template>

<style scoped>
.container {
  background-color: var(--main-background-color);
  min-height: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.back {
  position: relative;
  width: 100%;
  background: var(--main-gradient);
  border-radius: 0 0 20px 20px;
}

.person-info {
  padding: var(--page-padding);
  padding-bottom: 0px;
}
.Back_heng {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cygn {
  position: absolute;
  bottom: 0px;
  left: var(--page-padding);
  right: var(--page-padding);
}
.Back_shu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cygn-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  border-radius: 4px;
  padding: 5px;
  font-size: 10px;
  transition: all 0.3s;
}

.cygn-item .icon {
  width: 50%;
  max-width: 80px;
  margin-bottom: 5px;
}
.cygn-item:hover {
  background-color: rgb(221, 221, 221);
  border-radius: 4px;
  padding: 5px;
}

.icon-font {
  font-size: 85%;
  color: var(--gray-font-color);
}
.van-button {
  width: 100px;
  margin-top: 20px;
}
</style>
